<script setup lang="ts">
import API from '@/services';
import { onMounted, ref } from 'vue';

const props = defineProps<{ id: number | string }>();
const totalNum = ref(0);
const nowPageNum = ref(1);
const nowPageSize = ref(10);
const recordList = ref<defs.DataModelLogVo[]>([]);
const fetchDataModelLog = async () => {
  try {
    const res = await API.dataModel.postGetDataModelLog({
      pageNum: nowPageNum.value,
      pageSize: nowPageSize.value,
      modelId: props.id as number
    });
    totalNum.value = Number(res.data?.total);
    recordList.value = res.data?.list || [];
  } catch {}
};

// 改变页数
const changePageNum = (val: number) => {
  nowPageNum.value = val;
  fetchDataModelLog();
};

onMounted(() => {
  fetchDataModelLog();
});
defineExpose({ fetchDataModelLog });
</script>
<template>
  <div class="record-wrap">
    <a-timeline mode="left" labelPosition="relative" class="record-timeline">
      <a-timeline-item
        v-for="(item, index) in recordList"
        :key="item.id"
        :label="item.createTime"
        :dotColor="index === 0 ? '#3C6EFF' : '#E8EBF2'"
      >
        <a-row class="flex align-center">
          <div class="record-timeline-title">
            {{ item.createByName }}
          </div>
          <div class="record-timeline-desc">
            {{ item.operateType }}
          </div>
          <div class="record-timeline-desc">
            {{ item.content }}
          </div>
        </a-row>
      </a-timeline-item>
    </a-timeline>
    <a-row v-if="totalNum > 0">
      <a-col :span="24">
        <a-pagination
          :total="totalNum"
          show-total
          @change="changePageNum"
          style="
            justify-content: flex-end;
            margin-bottom: 18px;
            margin-right: 18px;
          "
        />
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped>
.record-wrap {
  padding: 8px 24px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
::v-deep(.arco-timeline-item.arco-timeline-item-last)
  .arco-timeline-item-dot-wrapper
  .arco-timeline-item-dot-line {
  display: block;
}
::v-deep(.arco-timeline-item:last-child) {
  .arco-timeline-item-dot-wrapper {
    .arco-timeline-item-dot-line {
      display: none;
    }
  }
}
</style>
<style lang="scss">
.record-timeline {
  .arco-timeline-item-vertical-left.arco-timeline-item-label-relative {
    margin-left: 160px;
  }
  .arco-timeline-item-label-relative > .arco-timeline-item-label {
    max-width: 160px;
  }
  .arco-timeline-item-dot {
    width: 12px;
    height: 12px;
  }
  .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-content {
    width: 12px;
  }
  .arco-timeline-item-dot-line {
    width: 2px;
    background: #e8ebf2;
  }
  &-title {
    font-size: 12px;
    color: #33353b;
    // line-height: 16px;
    width: 80px;
    font-weight: 600;
    margin-right: 8px;
  }
  &-desc {
    font-size: 12px;
    color: #60646f;
    width: 120px;
    margin-right: 8px;
  }
}
</style>
